import React from 'react';

const Edit = () =>
{
    // 表单实例
    const [ form ] = React.UI.Form.useForm();

    // 用于读取和修改当前位置的 URL 中的查询字符串
    const [SearchParams] = useSearchParams();

    // 住客id
    const [guestid] = useState<string>(SearchParams.get('guestid') ?? '');
    // 住客信息
    const [guest,SetGuest] = useState({});

    useEffect(() => {
        GetGuestInfo();
    },[]);

    // 获取当前页的数据
    const GetGuestInfo = async () =>
    {
        const params = {
            guestid,
            busid:React.business.id
        }

        const result = await React.http.post('/guest/info',params);

        if(result.code === 1)
        {
            SetGuest(result.data);

            // 赋值表单
            form.setFieldsValue({
                ...result.data
            })
        }else{
            React.fail(result.msg,() => React.navigate(-1));
        }
    }

    // 提交
    const OnEditGuestFinish = async (values:{
        id:string;
        nickname:string;
        mobile:string;
        gender:string;
        busid:number;
    }) =>
    {
        // 追加当前操作的用户id，这样才知道这个住客是谁添加
        values.busid = React.business.id;

        values.id = guestid;

        const result = await React.http.post('/guest/edit',values);

        if(result.code === 1)
        {
            React.success(result.msg,() => React.navigate(-1));
        }else{
            React.fail(result.msg);
        }
    }

    return (
        <>
            <React.UI.Form
                form={form}
                layout="horizontal"
                initialValues={guest}
                onFinish={OnEditGuestFinish}
                footer={
                    <React.UI.Button block type="submit" color="primary" size="large">
                        提交
                    </React.UI.Button>
                }
            >
                {/* 昵称 */}
                <React.UI.Form.Item
                    name="nickname"
                    label="昵称"
                    rules={[
                        {required: true}
                    ]}
                >
                    <React.UI.Input placeholder="请输入昵称" />
                </React.UI.Form.Item>

                {/* 手机号码 */}
                <React.UI.Form.Item
                    name="mobile"
                    label="手机号码"
                    rules={[
                        { required: true },
                        { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不对' }
                    ]}
                >
                    <React.UI.Input placeholder='请输入手机号' />
                </React.UI.Form.Item>

                {/* 性别 */}
                <React.UI.Form.Item name="gender" label="性别" rules={[{required: true}]}>
                    <React.UI.Radio.Group>
                        <React.UI.Space direction="horizontal">
                            <React.UI.Radio value='0'>女</React.UI.Radio>
                            <React.UI.Radio value='1'>男</React.UI.Radio>
                        </React.UI.Space>
                    </React.UI.Radio.Group>
                </React.UI.Form.Item>
            </React.UI.Form>
        </>
    )
}

export default Edit;